<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/question.css">
    <style type="text/css" media="screen">
        .error-body .q-content p input {
            color: #808080;
            font-weight: 500;
        }
        .error-body .q-content p input.right {
            color: #01B8AC;
        }

        .q-judge p.select {
            background: rgba(128,128,128,1);
            box-shadow: 0px 4px 12px 0px rgba(128,128,128,0.65);
        }

        .empty-box div span {
            color: #808080;
        }

        .q-options p.select {
            color: #fff;
            background-color: #808080;
        }

        .right-answer .text {
            margin-top: 16px;
            position: relative;
            padding-top: 24px;
        }

        .right-answer .text:before {
            content: ' ';
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 1px;
            transform: scaleY(0.5);
            background-color: #D4D4D4;
        }

        .right-answer .text img {
            width: 6px;
            height: 6px;
        }

        .right-answer .text span {
            font-size: 15px;
            margin: 0 6px;
            font-weight: 500;
            color: rgba(25, 25, 25, 1);
            line-height: 21px;
        }

        .answer {
            margin-top: 15px;
        }

        .answer.q-judge .select {
            background-color: #01B8AC;
            box-shadow:0px 4px 12px 0px rgba(1,184,172,0.65);
        }

        .answer .empty-box div span {
            color: #01B8AC;
        }

        .answer.q-options p.select {
            margin: 0;
            background-color: #01B8AC;
        }
    </style>
</head>
<body class="blue-bg error-body">
    <div class="vueApp" v-cloak>
        <header id="header" class="header blue-bg" data-flex="box:justify cross:center">
            <img src="../../image/nav_back.png" onclick="api.closeWin()" alt="">
            <p class="title">{{pageName}}</p>
            <p class="q-index">{{q_index+1}}/{{listData.length}}</p>
        </header>
        <header style="height: 45px;"></header>
        <div class="swiper-container" id="swiperList">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item,index in listData">
                    <div class="slide">
                        <div class="silde-content">
                            <div class="q-head" data-flex="main:justify cross:center">
                                <p>{{item.questionName}}</p>
                                <!-- <img v-if="item.questionAudioUrl" @click="handlePlayWord(index)" class="voice" :src="isPlay ? '../../image/course/pause.png' : '../../image/course/play2.png'" alt=""> -->
                            </div>
                            <div v-if="item.question" class="q-content">
                                <p style="word-break: normal;" v-html="item.question"></p>
                            </div>
                            <img v-if="item.questionPicUrl" class="q-img" :src="item.questionPicUrl" alt="">
                            <div v-if="q_type == 3" class="q-judge">
                                <!-- 判断 -->
                                <p v-for="option,_index in item.optionList" :class="option.optionId == item.answerErrorContent ? 'select' : ''">{{option.optionContent}}</p>
                            </div>
                            <div v-if="q_type == 4" class="q-list-box">
                                <!-- 排序 -->
                                <div class="empty-box">
                                    <!-- 空 -->
                                    <div v-for="option in item.answerErrorContent" data-flex="main:center cross:center">
                                        <span style="word-break: normal;">
                                            {{option.optionContent}}
                                        </span>
                                    </div>
                                </div>
                                <div class="option-box">
                                    <!-- 选项 -->
                                    <div v-for="option in item.optionList" data-flex="main:center cross:center" class="select" style="word-break: normal;">
                                        {{option.optionContent}}
                                    </div>
                                </div>
                            </div>
                            <div v-if="q_type == 5" class="q-options">
                                <!-- 选择 -->
                                <p v-for="option,_index in item.optionList" :class="option.optionId == item.answerErrorContent ? 'select' : ''" data-flex="cross:center">{{_index|fnIndex}}.&nbsp;&nbsp;{{option.optionContent}}</p>
                            </div>
                            <div v-if="q_type == 6" class="lineQ-box" data-flex="main:justify">
                                <!-- 连线 -->
                                <div class="left">
                                    <div v-for="option,_index in item.optionErrorList1" :id="'left_' + index + '_' + _index" :class="option.optionContentType == '1' ? 'xuanxiang text' : 'xuanxiang'" :style="selectLine.indexOf(_index+';') != -1 ? 'border: 3px solid #FFD446;' : ''" data-flex="main:center cross:center">
                                        {{_index+1}}.
                                        <img :src="option.optionContent" alt="">
                                        <div :id="'left_' + index + '_' + _index + '_line'" class="line"></div>
                                    </div>
                                </div>
                                <div class="right">
                                    <div v-for="option,_index in item.optionErrorList2" :id="'right_' + index + '_' + option.optionId" :class="option.optionContentOneType == '1' ? 'xuanxiang text' : 'xuanxiang'" data-flex="box:first cross:center">
                                        <p class="char">{{_index|fnIndex}}</p>
                                        <div style="word-break: normal;" v-html="insertBr(option.optionContentOne)"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="right-answer">
                                <p class="text" data-flex="main:center cross:center">
                                    <img src="../../image/course/read_icon.png" alt="">
                                    <span>正确答案</span>
                                    <img src="../../image/course/read_icon.png" alt="">
                                </p>
                                <div v-if="q_type < 3" class="q-content">
                                    <p style="word-break: normal;" v-html="item.questionRightContent"></p>
                                </div>
                                <div class="answer q-judge" v-if="q_type == 3" data-flex="main:center cross:center">
                                    <p v-for="option,_index in item.optionList" v-if="option.isAnswer == 1" class="select">{{option.optionContent}}</p>
                                </div>
                                <div v-if="q_type == 4" class="answer q-list-box">
                                    <!-- 排序 -->
                                    <div class="empty-box">
                                        <!-- 空 -->
                                        <div v-for="option,_index in item.correctList" data-flex="main:center cross:center">
                                            <span style="word-break: normal;">
                                                {{option.optionContent}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div v-if="q_type == 5" class="answer q-options">
                                    <!-- 选择 -->
                                    <p v-for="option,_index in item.optionList" v-if="option.isAnswer == 1" class="select" data-flex="cross:center">{{_index|fnIndex}}.&nbsp;&nbsp;{{option.optionContent}}</p>
                                </div>
                                <div v-if="q_type == 6" class="answer lineQ-box" data-flex="main:justify">
                                    <!-- 连线 -->
                                    <div class="left">
                                        <div v-for="option,_index in item.optionList1" :id="'error_left_' + index + '_' + _index" :class="option.optionContentType == '1' ? 'xuanxiang text' : 'xuanxiang'" :style="selectLine.indexOf(_index+';') != -1 ? 'border: 0px solid #FFD446;' : ''" data-flex="main:center cross:center">
                                            {{_index+1}}.
                                            <img :src="option.optionContent" alt="">
                                            <div :id="'error_left_' + index + '_' + _index + '_line'" class="line"></div>
                                        </div>
                                    </div>
                                    <div class="right">
                                        <div v-for="option,_index in item.optionList2" :id="'error_right_' + index + '_' + option.optionId" :class="option.optionContentOneType == '1' ? 'xuanxiang text' : 'xuanxiang'" data-flex="box:first cross:center">
                                            <p class="char">{{_index|fnIndex}}</p>
                                            <div style="word-break: normal;" v-html="insertBr(option.optionContentOne)"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer" data-flex="box:mean">
            <div onclick="handleLast()" :class="q_index ? 'last' : 'disable last'">上一题</div>
            <div onclick="handleNext()" v-text="q_index+1 == listData.length ? '完成' : '下一题'"></div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/question/data_parse.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm;
    var header, pageParam = {};

    apiready = function(){
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;
        fnInit();
    };

    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                isPlay: false,
                listData: [],
                pageName: pageParam.name,
                q_index: 0,
                q_type: pageParam.code -43, // 1-44 听音填空 2-45 填空 3-46 判断 4-47 排序 5-48 选择 6-49 连线
                questionContent: '',
                questionRightContent: '',
                selectLine: ''
            },
            filters: {
                fnIndex: function(val) {
                    return getChar(val);
                }
            },
            methods: {
                insertBr: function(sender) {
                    return sender.replace(/\r\n|\n/g, '<br>');
                },
                initSwiper: function() {
                    this.mySwiper = new Swiper('.swiper-container', {
                        autoplay: false,
                        loop: false,
                        on: {
                            transitionEnd: function(a, b, c) {
                                vm.q_index = this.activeIndex;
                                vm.selectLine = '';
                            }
                        },
                    });
                }
            }
        });

        header = $('#header');
        var content_h = window.screen.availHeight - header.outerHeight()
                        - 50 - 30 - 37 - 36;
        $('.silde-content').css('min-height', content_h);
        getPageData();
    }

    // 连线题左侧
    function handleLineLeft(option, index) {
        if (option.lineRight) {
            // 当前选项已经连接右侧
            vm.selectLine = '';
            return;
        };
        var list = deepCopy(vm.listData);
        var itemData = list[vm.q_index];
        // if (!itemData.canChange) return; // 不允许修改
        // 重新选中左侧
        if (vm.selectLine.indexOf(';') > 0 || vm.selectLine == '') {
            vm.selectLine = index + ';';
        } else {
            leftLineToRight(itemData, 'left', index);
        }
        vm.QAList = list;
    }
    // 连线题右侧
    function handleLineRight(option, index) {
        if (option.lineLeft) {
            // 当前选项已经连接左侧
            vm.selectLine = '';
            return;
        }
        var list = deepCopy(vm.QAList);
        var itemData = list[vm.q_index];
        // if (!itemData.canChange) return; // 不允许修改
        // 重新选中右侧
        if (vm.selectLine.indexOf(';') == 0 || vm.selectLine == '') {
            vm.selectLine = ';' + index;
        } else {
            leftLineToRight(itemData, 'right', index);
        }
        vm.QAList = list;
    }
    // 连线
    function leftLineToRight(itemData, side, index) {
        var canLine = false;
        var left = side == 'left' ? index : vm.selectLine.replace(';', '');
        var right = side == 'right' ? index : vm.selectLine.replace(';', '');
        // if (side == 'left' && !itemData.optionList1[left].lineRight) {
        //     canLine = true;
        // } else if (side == 'right' && !itemData.optionList2[right].lineLeft) {
        //     canLine = true;
        // }
        // if (!canLine) return;
        vm.selectLine = '';
        // itemData.optionList2[right].lineLeft = 'left_' + left;
        // itemData.optionList1[left].lineRight = 'right_' + right;
        var isRight = false; // 连线是否正确，默认否
        // if(itemData.optionList1[left].optionId == itemData.optionList2[right].optionId) {
        //     isRight = true; // 连线正确
        // }
        lineLeftToRight('left_' + vm.q_index + '_' + left, 'right_' + vm.q_index + '_' + right, isRight);

        // 连线结果处理和提交
        // var line_all = true,
        //     line_map = {};
        // for (var i = 0; i < itemData.optionList1.length; i++) {
        //     var item1 = itemData.optionList1[i];
        //     if (item1.lineRight) {
        //         line_map[item1.optionId] = itemData.optionList2[item1.lineRight.replace('right_', '')].optionId;
        //     } else {
        //         line_all = false;
        //         break;
        //     }

        // }
        // if (line_all) {
        //     itemData.fillAnswerStr = JSON.stringify(line_map);
        //     // compareAnswer(itemData);
        //     vm.canSubmite = true;
        //     setTimeout(function() {
        //         autoSubmiteOneQuestion();
        //     })
        // }
    }

    // 排序
    function handleSort(index, _index) {
        var options = deepCopy(vm.options),
            sortIndex = vm.listData[index].sortIndex || 0,
            option = options[_index];
        if(!option.sel) {
            // 未选中
            option.sel = true;
            options[sortIndex].sortIndex = _index;
            vm.options = options;
            vm.listData[index].sortIndex = ++sortIndex;
        }
    }

    // 选择选项
    function handleJudge(index) {
        var list = deepCopy(vm.listData),
            item = list[vm.q_index];
        item.sel = index;
        $('.questionValue-0').val(getChar(index));
        vm.listData = list;
    }

    function handleLast() {
        if(vm.q_index) {
            vm.mySwiper.slidePrev();
        }
    }

    function handleNext() {
        if(vm.q_index+1 == vm.listData.length) {
            // 提交
            api.closeWin();
        }else {
            // 下一个
            vm.mySwiper.slideNext();
        }
    }

    // 获取页面数据
    function getPageData() {
        var url = 'courseReport/findErrorQuestionReport';
        var params = {
            reportType: '4',
            unitId: pageParam.id,
            queryStudentId: pageParam.custId || USER.Get('custId'),
            questionTypeCode: pageParam.code
        };
        var callback = function(data) {
            var listData = formateQAData(data.listData, true);
            vm.listData = listData;
            if(vm.listData.length > 0) {
                setTimeout(function() {
                    vm.initSwiper();
                    if(vm.q_type == 6) {
                        for (var i = vm.listData.length - 1; i >= 0; i--) {
                            var question = vm.listData[i];
                            for (var j = question.optionList1.length - 1; j >= 0; j--) {
                                var item = question.optionList1[j];
                                lineLeftToRight('left_' + i + '_' + j, 'right_' + i + '_' + item.rightOptionId, 'error');
                            }
                        }
                        for (var i = vm.listData.length - 1; i >= 0; i--) {
                            var question = vm.listData[i];
                            for (var j = question.optionErrorList1.length - 1; j >= 0; j--) {
                                var item = question.optionErrorList1[j];
                                lineLeftToRight('error_left_' + i + '_' + j, 'error_right_' + i + '_' + item.optionId, true);
                            }
                        }
                    }else if(vm.q_type < 3) {
                        var list = deepCopy(vm.listData);
                        for (var i = list.length - 1; i >= 0; i--) {
                            var question = list[i];
                            question.question = insertQuestionInput(question.questionWord, 0, true,{ right: false, answer: question.answerErrorContent });
                            question.questionRightContent = insertQuestionInput(question.questionWord, 0, true,{ right: true, answer: question.answerStr });
                            // alert(question.question + '===' + question.questionRightContent);
                        }
                        vm.listData = list;
                    }
                }, 100);
            }
            // status 为200时,只返回data
        };
        POST(url, params, callback);
    }
</script>
</html>